<template lang="">
  <div class="header_right">
    <div class="header_activity">
      <ul>
        <li>
          <div class="ant-dropdown-link ant-dropdown-trigger">
            <img
              :src="getAssetsImages('home/header_icon_service.png')"
              height="24"
            />
            <p>{{ $t('keFu-0') }}</p>
          </div>
        </li>
        <!-- <li>
          <img
            :src="getAssetsImages('home/header_icon_discount.png')"
            height="24"
          />
          <p>{{ $t('youH-0') }}</p>
        </li> -->
        <li>
          <img
            :src="getAssetsImages('home/header_icon_app.png')"
            height="24"
          />
          <p>APP</p>
        </li>

        <li style="width: auto">
          <a-dropdown>
            <span class="ant-dropdown-link">
              {{  curLanguage }}
              <DownOutlined />
            </span>
            <template #overlay>
              <a-menu>
                <a-menu-item 
                  v-for="(item, index) in languageList"
                  :key="'lang-item-' + index"
                  @click="switchLanguage(item.value)"
                >
                  <a href="javascript:;">{{ item.label }}</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </li>
       
      </ul>
    </div>

    <div v-if="hasLogined" class="header_personalInfo">
      <ul>
        <li class="">
          <router-link :to="{ name: 'DepositArea' }">{{ $t('cunK') }}</router-link>
        </li>
        <li class="">
          <router-link :to="{ name: 'WithdrawalArea' }">{{ $t('quKu') }}</router-link>
        </li>
        <li class="">
          <router-link :to="{ name: 'GamingWallet' }">{{ $t('zhuan-6') }}</router-link>
        </li>
      </ul>
      <div class="header_moneyBag">
        <div style="line-height: 21px; height: 21px">
          <span style="margin: 0; padding: 0">{{ userInfo.user_name }}</span>
          <img
            width="42"
            src="https://hpic.5zj8.com/Fh9xv2kDv7u-3g0DdyEoKphFIE9W"
          />
        </div>
        <span style="height: 21px; line-height: 21px"
          >{{ $t('useri', [userInfo.wallet_balance || 0]) }}
          <ReloadOutlined 
            style="margin-left: 5px; margin-top: 3px;cursor: pointer;" 
            @click="rerefreshUserInfo"
          />
        </span>
      </div>
      <div
        class="header_personalHeader"
        style="height: 42px; line-height: 42px; vertical-align: top"
      >
        <img
          :src="userInfo.avatar || getAssetsImages('home/imageAvatar.png')"
          style="
            width: 42px;
            height: 42px;
            background: #ddd;
            border-radius: 100%;
          "
        />
        <div class="header_infoList">
          <div class="header_infoList_inner fix">
            <div class="header_currentTime">
              {{ $t('useri-0', [userInfo.user_name, getTimeRange()]) }}
            </div>
            <ul>
              <li>
                <a href="#/admin/siteLetter" class="">
                  <div>
                    <img
                      :src="getAssetsImages('home/header_message.png')"
                      width="24"
                    />
                    {{ $t('xiao-2') }}
                  </div></a
                >
              </li>
              <li>
                <a href="#/admin/bettingRecord" class="">
                  <div>
                    <img
                      :src="getAssetsImages('home/header_beat.png')"
                      width="24"
                    />
                    {{ $t('touZ-3') }}
                  </div></a
                >
              </li>
              <li>
                <a href="#/admin/fundRecord" class="">
                  <div>
                    <img
                      :src="getAssetsImages('home/header_trade.png')"
                      width="24"
                    />
                    {{ $t('jiao-2') }}
                  </div></a
                >
              </li>
              <li>
                <a href="#/admin/vipDetails" class="">
                  <div>
                    <img
                      :src="getAssetsImages('home/header_vip.png')"
                      width="24"
                    />
                    {{ $t('vipX') }}
                  </div></a
                >
              </li>
              <li>
                <a href="#/admin/personalInformation" class="">
                  <div>
                    <img
                      :src="getAssetsImages('home/header_data.png')"
                      width="24"
                    />
                    {{ $t('geRe') }}
                  </div></a
                >
              </li>
              <li @click="logout">
                <div>
                  <img
                    :src="getAssetsImages('home/header_logout.png')"
                    width="24"
                  />
                  {{ $t('tuiC') }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    
    </div>

    <div v-else class="header_loginReg">
      <router-link :to="{ name: 'Register' }" style="color: white">
        <div class="register_btn">
          {{ $t('zhuC-0') }}
        </div>
      </router-link>
      <router-link :to="{ name: 'Login' }">
        <div class="primary_btn" style="background-color: #5A88FF!important;border: none">
          {{ $t('deng-2') }}
        </div>
      </router-link>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, reactive, computed } from 'vue';
import { ReloadOutlined, DownOutlined } from "@ant-design/icons-vue";
import { getUserInfo } from "@/api/account";
import { getTimeRange } from "@/utils/index";
import { cleanToken } from "@/utils/token";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/stores/userInfo";
import { useCache } from '@/hooks/web/useCache';
import { getAssetsImages } from '@/utils';
import { useI18n } from 'vue-i18n'
import { setLang } from '@/utils/lang';
const { t, locale } = useI18n()
const router = useRouter();
const { user: userInfo, updateUserInfo } = useUserStore();
const hasLogined = computed(() => !!userInfo.hasLogined )
const languageList = ref<any[]>([
  {
      label: '简体中文',
      value: 'zh-CN',
  },
  {
      label: '繁体中文',
      value: 'zh-HK',
  },
  {
      label: 'English',
      value: 'en',
  },
  {
      label: 'Malay',
      value: 'my',
  },
]);

const curLanguage = computed(() => {
    const language = languageList.value;
    let curLocale = language.find((item: any) => item.value === locale.value);
    if (!curLocale) {
        curLocale = language[0];
    }
    return curLocale.label;
})

function switchLanguage(curLang: string) {
    if (curLang) {
        locale.value = curLang;
        setLang(curLang);
        window.location.reload();
    }
}

function rerefreshUserInfo() {
  console.log(1111);
  updateUserInfo();
}

onBeforeMount(() => {
  updateUserInfo();
});

function logout() {
  const { wsCache } = useCache()

  wsCache.clear()
  router.push({
    name: t('login'),
  });
}
</script>
<style lang=""></style>
